<#include "/common/dhtml_gantt.html">
<h1 align="center">环线一期站后工程进度计划横道图</h1>
<span>图表导出：</span>
<select id="export" style='margin: 10px;' onchange='exportTo()'>
	<option>导出到...</option>
	<option value="pdf">PDF</option>
	<option value="png">PNG</option>
	<option value="excel">Excell</option>
	<option value="ical">iCal</option>
</select>
<div id="gantt_here" style="width:100%;height:80%; border:1px"></div>
<script type="text/javascript">
	// add month scale
	gantt.config.scale_unit = "month"; //第一个时间尺度，即X轴的单位，包括："minute", "hour", "day", "week", "month", "year"

	gantt.config.date_scale = "%M";
	gantt.templates.date_scale = function(date) {
		return gantt.date.date_to_str(gantt.config.date_scale)(date);
	};

	gantt.config.subscales = [ //第二个时间尺度单位
	{
		unit : "year",
		step : 1,
		date : "%Y"
	}];
	gantt.config.scale_height = 3 * 28; //设置时间尺度和Grid树的高度
	gantt.config.work_time = true;
	gantt.config.correct_work_time = true;
	
	// configure milestone description
	/* gantt.templates.rightside_text = function(start, end, task) {//进度条右侧的提示文字
		if (task.type == gantt.config.types.milestone) {
			return task.text;
		}
		return "";
	}; */
	/*  gantt.templates.leftside_text = function(start, end, task) {//进度条右侧的提示文字
		if (task.type == gantt.config.types.milestone) {
			return "进度："+task.progress * 100 + "%<br>"+task.text;
		}
		return "";
	};  */
	//显示完成百分比
	gantt.templates.progress_text = function(start, end, task) {
		return "<span style='font-weight:bold;font-size:20px;color:yellow'>站点施工形象进度："+task.progress * 100 + "%</span>";
	};
	//左侧显示数据列
	gantt.config.columns = [ {
		name : "text",
		label : "站点名",
		tree : true,
		width : 200
	}, {
		name : "start_date",
		label : "计划开工时间",
		align : "center",
		width : 100
	}, {
		name : "end_date",
		label : "计划完工时间",
		align : "center",
		width : 100
	}, {
		name : "p_duration",
		label : "计划工期",
		align : "center",
		width : 80,template:function(obj){
			if(obj.p_duration==null){
				return "";
			}
			else{
				return obj.p_duration;
			}
        }
	} , {
		name : "real_sdate",
		label : "实际开工时间",
		align : "center",		
		width : 100,		
		template:function(obj){
			if(obj.real_sdate==null){
				return "";
			}
			else{
				return obj.real_sdate;
			}
        }		
	}, {
		name : "real_edate",
		label : "实际完工时间",
		align : "center",
		width : 100,
		template:function(obj){
			if(obj.real_edate==null){
				return "";
			}
			else{
				return obj.real_edate;
			}
        }
	}, {
		name : "real_duration",
		label : "实际工期",
		align : "center",
		width : 80,
		template:function(obj){
			if(obj.real_duration==null){
				return "";
			}
			else{
				return obj.real_duration;
			}
        }
	}, {
			name : "ope",
			label : "查看进度",
			align : "center",
			width : 80,
			template:function(obj){
				return "<a href='javascript:;' onclick='showstation("+obj.id+")'>详细进度</a>"
	        }
		} 
	];
	// 弹出编辑对话框
	/* gantt.config.lightbox.sections = [//弹出对话框设置
	{
		name : "description",
		height : 70,
		map_to : "text",
		type : "textarea",
		focus : true
	}, {
		name : "type",
		type : "typeselect",
		map_to : "type"
	}, {
		name : "time",
		height : 72,
		type : "duration",
		map_to : "auto"
	} ]; */

	gantt.config.xml_date = "%Y-%m-%d %H:%i:%s"; // XML中的日期格式 
	// enable dataProcessor
	/*
	var dp = new dataProcessor("/Home/Save");//dhtmlxGantt保存变化，包括添加、更新、删除
	dp.init(gantt); */
	gantt.config.readonly = true;//设置为只读模式
	gantt.init("gantt_here");//初始化dhtmlxGantt,gantt_here为视图中div的id
	gantt.load("${ctx}/gantt/getStations","json");//加载数据

	/* gantt.attachEvent("onTaskSelected", function(id, item) {		
		window.open("${ctx}/gantt/stationPage?station_id="+id,"_blank")	
		
	});	 */
	function showstation(id){
		window.open("${ctx}/gantt/stationPage?station_id="+id,"_blank")	;		
	}
	//导出图标到?
	var exportTo = function() {
		var output = document.getElementById("export").value;
		switch (output) {
		case "pdf":
			gantt.exportToPDF();
			break;
		case "png":
			gantt.exportToPNG();
			break;
		case "excel":
			gantt.exportToExcel();
			break;
		case "ical":
			gantt.exportToICal();
			break;
		default:
			alert("错误文件格式");
		}
	};
</script>
</body>
</html>